$popup-min-width-percent: 75;
$popup-max-width: 900;
$popup-max-height: 580;
$form-max-width: 57%;

::v-deep .v-dialog {
  border-radius: 0.8em;
  overflow: hidden;
}

::v-deep .v-overlay__scrim {
  backdrop-filter: blur(50px);
}

.login-popup-container {

  width: #{$popup-max-width}px;
  height: #{$popup-max-height}px;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  user-select: none;

  .left-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-image: url("../../assets/image/undraw_programming_re_kg9v.svg");
    background-repeat: no-repeat;
    background-color: #b8e5f8;
    background-size: 100% 100%;
  }

  .right-content {
    width: #{$form-max-width};
    height: 100%;
    flex-shrink: 0;
    padding: 40px 60px;
    background-color: #fff;

    .login-form, .register-form, .username-form {
      padding: 0 20px;

      .change-form {
        width: 100%;
        text-align: left;

        span {
          font-size: 13px;
          color: #555;
        }

        .change-btn {
          cursor: pointer;
        }
      }

      .form-title {
        margin-top: 30px;
        font-size: 32px;
        color: #333;
      }
    }

    .login-form {
      .form {
        margin-top: 30px;

        .captcha-row__default {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          transition-property: opacity;
          transition-duration: 500ms;

          .v-input {
            margin-right: 15px;
          }

          .v-image {
            width: 120px;
            margin: 15px 0 0 auto;
            cursor: pointer;

            .row {
              cursor: default;

              .v-icon {
                font-size: 18px;
                opacity: 0.7;
                cursor: pointer;
              }

              .v-icon:not(.on-hover) {
                opacity: 1;
              }

            }
          }
        }

        .captcha-row__hide {
          opacity: 0;
        }

        .captcha-row__show {
          opacity: 1;
        }

        .auto-and-forget {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;

          .forgot-pwd {
            margin: 16px 0 0 auto;
            transform: translateX(14.44px);
          }

          ::v-deep .v-btn__content {
            font-family: "Roboto", sans-serif;
            font-size: 14px;
            color: #000;
            letter-spacing: normal;
            text-indent: 0;
          }
        }

        .button-transfer__default {
          transition-duration: 500ms;
        }

        .button-transfer__unmoved {
          transform: translateY(-60px);
        }
      }
    }

    .register-form {
      .form {
        margin-top: 30px;

        .captcha-row {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;

          .v-input {
            margin-right: 15px;
          }

          .v-btn {
            width: 120px;
            margin: 10px 0 0 auto;
          }
        }

        .password-row__default {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          transition-property: opacity;
          transition-duration: 500ms;
        }

        .password-row__hide {
          opacity: 0;
        }

        .password-row__show {
          opacity: 1;
        }

        .user-agreement {
          display: flex;
          flex-direction: row;

          ::v-deep .v-btn__content {
            font-family: "Roboto", sans-serif;
            font-size: 14px;
            color: #000;
            letter-spacing: normal;
            text-indent: 0;
          }
        }

        .button-transfer__default {
          transition-duration: 500ms;
        }

        .button-transfer__unmoved {
          transform: translateY(-60px);
        }
      }
    }

    .username-form {
      .form {
        margin-top: 80px;

        .complete-btn {
          margin-top: 50px;
        }
      }
    }
  }

  @media screen and (min-width: 1200px) and (max-width: 1500px) {

    .left-content {

    }

    .right-content {
      padding: 40px 50px;
    }
  }

  @media screen and (min-width: 800px) and (max-width: 1200px) {
    width: #{$popup-min-width-percent}vw;

    .left-content {

    }

    .right-content {
      padding: 40px 40px;
    }
  }

  @media screen and (max-width: 800px) {
    width: #{$popup-min-width-percent}vw;

    .left-content {
      display: none;
    }

    .right-content {
      width: 100%;
      padding: 40px 30px;
    }
  }
}

::v-deep .v-tab.v-tab {
  font-size: 16px !important;
}

::v-deep .v-label, .v-size--default {
  font-size: 14px !important;
}

::v-deep .v-snack__content {
  text-align: center !important;
  //padding: 10px 16px !important;
}

::v-deep .v-snack__action  {
  margin-right: 0 !important;
}

::v-deep .v-snack__wrapper {
  //transform: translateY(10px);
}